<template>
  <div class="smart-home-container">
    <!-- 顶部信息栏 -->
    <div class="header">
      <img src="../../assets/返回1.svg" alt="返回" class="back-image" style="width: 20px; height: 20px;"
        @click="handleBack">
      <div class="room-info" style="color: black;">
        <h1>主卧室</h1>
        <div class="time-temp">
          <span class="time">{{ currentTime }}</span>
          <span class="temp">{{ currentTemp }}°C</span>
        </div>
      </div>
      <button class="settings-btn">
        <i class="fas fa-cog"></i>
      </button>
    </div>

    <!-- 场景模式选择 -->
    <div class="scene-mode">
      <h2>场景模式</h2>
      <div class="mode-buttons">
        <button v-for="mode in sceneModes" :key="mode.id" :class="{ active: activeMode === mode.id }"
          @click="switchMode(mode.id)">
          <i :class="mode.icon"></i>
          <span>{{ mode.name }}</span>
        </button>
      </div>
    </div>

    <!-- 设备控制面板 -->
    <div class="device-control">
      <h2>设备控制</h2>
      <div class="control-grid">
        <!-- 灯光控制 -->
        <div class="control-card">
          <h3><i class="fas fa-lightbulb"></i> 灯光</h3>
          <div class="control-content">
            <div class="switch">
              <label>
                <input type="checkbox" v-model="lightStatus">
                <span class="slider"></span>
              </label>
            </div>
            <span style="left: 150px;">{{ lightStatus ? '开' : '关' }}</span>
            <div class="slider-control">
              <label>亮度</label>
              <input type="range" min="0" max="100" v-model="lightBrightness" :disabled="!lightStatus">
              <span>{{ lightBrightness }}%</span>
            </div>
          </div>
        </div>

        <!-- 空调控制 -->
        <div class="control-card">
          <h3><i class="fas fa-snowflake"></i> 空调</h3>
          <div class="control-content">
            <div class="switch">
              <label>
                <input type="checkbox" v-model="acStatus">
                <span class="slider"></span>
              </label>
            </div>
            <span style="left: 150px;">{{ acStatus ? '开' : '关' }}</span>

            <div class="temp-control">
              <label>温度</label>
              <div class="temp-adjust">
                <button @click="decreaseTemp" :disabled="!acStatus">
                  <i class="fas fa-minus"></i>
                </button>
                <span>{{ acTemp }}°C</span>
                <button @click="increaseTemp" :disabled="!acStatus">
                  <i class="fas fa-plus"></i>
                </button>
              </div>
            </div>
            <div class="mode-select">
              <label>模式</label>
              <div class="mode-options">
                <button v-for="mode in acModes" :key="mode" :class="{ active: acMode === mode }" @click="acMode = mode"
                  :disabled="!acStatus">
                  {{ mode }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 投影仪控制 -->
        <div class="control-card">
          <h3><i class="fas fa-video"></i> 投影仪</h3>
          <div class="control-content">
            <div class="switch">
              <label>
                <input type="checkbox" v-model="projectorStatus">
                <span class="slider"></span>
              </label>
            </div>
            <span style="left: 150px;">{{ projectorStatus ? '开' : '关' }}</span>

            <div class="source-select">
              <label>信号源</label>
              <div class="source-options">
                <button v-for="source in projectorSources" :key="source" :class="{ active: projectorSource === source }"
                  @click="projectorSource = source" :disabled="!projectorStatus">
                  {{ source }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 音响控制 -->
        <div class="control-card">
          <h3><i class="fas fa-music"></i> 音响</h3>
          <div class="control-content">
            <div class="switch">
              <label>
                <input type="checkbox" v-model="speakerStatus">
                <span class="slider"></span>
              </label>
            </div>
            <span style="left: 150px;">{{ speakerStatus ? '开' : '关' }}</span>

            <div class="slider-control">
              <label>音量</label>
              <input type="range" min="0" max="100" v-model="speakerVolume" :disabled="!speakerStatus">
              <span>{{ speakerVolume }}%</span>
            </div>
            <div class="playback-control">
              <button :disabled="!speakerStatus">
                <img src="../../assets/左.svg" class="icon" style="height: 25px;width: 25px;">
              </button>
              <button :disabled="!speakerStatus">
                <img src="../../assets/播放.svg" class="icon" style="height: 25px;width: 25px;">
              </button>
              <button :disabled="!speakerStatus">
                <img src="../../assets/右.svg" class="icon" style="height: 25px;width: 25px;">
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作提示 -->
    <div class="toast" v-if="showToast">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const handleBack = () => {
  router.push({ name: 'Home' });
};
// 当前时间和温度
const currentTime = ref('');
const currentTemp = ref(26);

// 场景模式
const sceneModes = ref([
  { id: 'daily', name: '日常模式', icon: 'fas fa-sun' },
  { id: 'rest', name: '休息模式', icon: 'fas fa-couch' },
  { id: 'media', name: '影音模式', icon: 'fas fa-film' },
  { id: 'sleep', name: '睡眠模式', icon: 'fas fa-moon' }
]);
const activeMode = ref('daily');

// 灯光控制
const lightStatus = ref(true);
const lightBrightness = ref(80);

// 空调控制
const acStatus = ref(false);
const acTemp = ref(24);
const acMode = ref('制冷');
const acModes = ref(['制冷', '制热', '除湿', '自动']);

// 投影仪控制
const projectorStatus = ref(false);
const projectorSource = ref('HDMI');
const projectorSources = ref(['HDMI', 'USB', '无线', '蓝牙']);

// 音响控制
const speakerStatus = ref(false);
const speakerVolume = ref(50);

// 提示信息
const showToast = ref(false);
const toastMessage = ref('');

// 更新时间
const updateTime = () => {
  const now = new Date();
  currentTime.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
};

// 切换场景模式
const switchMode = (modeId: string) => {
  activeMode.value = modeId;
  showToastMessage(`已切换至${sceneModes.value.find(m => m.id === modeId)?.name}`);

  // 根据模式调整设备状态
  switch (modeId) {
    case 'daily':
      lightStatus.value = true;
      lightBrightness.value = 80;
      acStatus.value = false;
      projectorStatus.value = false;
      speakerStatus.value = false;
      break;
    case 'rest':
      lightStatus.value = true;
      lightBrightness.value = 40;
      acStatus.value = true;
      acTemp.value = 26;
      acMode.value = '自动';
      projectorStatus.value = false;
      speakerStatus.value = false;
      break;
    case 'media':
      lightStatus.value = true;
      lightBrightness.value = 20;
      acStatus.value = true;
      acTemp.value = 24;
      acMode.value = '制冷';
      projectorStatus.value = true;
      projectorSource.value = 'HDMI';
      speakerStatus.value = true;
      speakerVolume.value = 60;
      break;
    case 'sleep':
      lightStatus.value = false;
      acStatus.value = true;
      acTemp.value = 28;
      acMode.value = '自动';
      projectorStatus.value = false;
      speakerStatus.value = false;
      break;
  }
};

// 温度调节
const increaseTemp = () => {
  if (acTemp.value < 30) {
    acTemp.value++;
    showToastMessage(`温度已调至${acTemp.value}°C`);
  }
};

const decreaseTemp = () => {
  if (acTemp.value > 16) {
    acTemp.value--;
    showToastMessage(`温度已调至${acTemp.value}°C`);
  }
};

// 显示提示信息
const showToastMessage = (message: string) => {
  toastMessage.value = message;
  showToast.value = true;
  setTimeout(() => {
    showToast.value = false;
  }, 2000);
};

// 初始化
onMounted(() => {
  updateTime();
  const timer = setInterval(updateTime, 60000);

  onBeforeUnmount(() => {
    clearInterval(timer);
  });
});
</script>

<style scoped>
.smart-home-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #2C3E50, #4CA1AF);
  color: #ECF0F1;
  font-family: 'Arial', sans-serif;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.room-info h1 {
  font-size: 28px;
  margin-bottom: 5px;
}

.time-temp {
  display: flex;
  gap: 15px;
}

.time-temp span {
  font-size: 18px;
}

.settings-btn {
  background: none;
  border: none;
  color: #ECF0F1;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s;
}

.settings-btn:hover {
  transform: rotate(90deg);
}

.scene-mode {
  margin-bottom: 30px;
}

.scene-mode h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

.mode-buttons {
  display: flex;
  gap: 15px;
}

.mode-buttons button {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.mode-buttons button i {
  font-size: 24px;
}

.mode-buttons button.active {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.device-control h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.control-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #2C3E50;
}

.control-card h3 {
  font-size: 18px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-card h3 i {
  font-size: 16px;
}

.control-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.switch {
  display: flex;
  align-items: center;
  gap: 10px;
}

.switch label {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #4CA1AF;
}

input:checked+.slider:before {
  transform: translateX(26px);
}

.slider-control,
.temp-control,
.mode-select,
.source-select {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.slider-control label,
.temp-control label,
.mode-select label,
.source-select label {
  font-size: 14px;
}

input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
  outline: none;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4CA1AF;
  cursor: pointer;
}

.temp-adjust {
  display: flex;
  align-items: center;
  gap: 15px;
}

.temp-adjust button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #4CA1AF;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.temp-adjust button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.mode-options,
.source-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mode-options button,
.source-options button {
  padding: 5px 10px;
  border-radius: 15px;
  background: #eee;
  border: none;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.mode-options button.active,
.source-options button.active {
  background: #4CA1AF;
  color: white;
}

.mode-options button:disabled,
.source-options button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.playback-control {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.playback-control button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #4CA1AF;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.playback-control button:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .mode-buttons {
    flex-direction: column;
  }

  .control-grid {
    grid-template-columns: 1fr;
  }
}
</style>
